<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <span class="mdl-layout__title"><%= title %></span>
    </div>
  </header>

  <%= erb :"../../global/navigation" %>

  <main class="mdl-layout__content" style="padding: 40px">
    <!-- List all existing provider credentials for a user -->

    <h4>Provider Credentials</h4>
    <div class="table-responsive-vertical shadow-z-1" style="overflow: scroll">
      <table class="table-mc-light-blue mdl-data-table mdl-js-data-table mdl-shadow--2dp">
        <thead>
          <tr>
            <th>Email</th>
            <th>API Token</th>
            <th>Provider Name</th>
            <th>Type</th>
            <th>Full Name</th>
          </tr>
        </thead>

        <tbody>
          <% user_credentials.each do |user_id, credentials| %>
            <% credentials.each do |credential| %>
              <tr>
                <%=
                  erb :"./forms/_provider_credentials",
                  locals: { user_id: user_id, credential: credential }
                %>
              </tr>
            <% end %>
          <% end %>
        </tbody>
      </table>
    </div>
  </main>
</div>
